<form nz-form class="ant-advanced-search-form">
  <div nz-row [nzGutter]="24">
    <div nz-col nzLg="12" nzXl="6">
      <nz-form-item nzFlex>
        <nz-form-label>{{l('pda_no')}}</nz-form-label>
        <nz-form-control>
          <input type="text" [(ngModel)]="keyword" [ngModelOptions]="{standalone: true}" nz-input [placeholder]="l('please_enter_pda_no')">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzLg="12" nzXl="6" class="control-area">
      <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
      <button nz-button (click)="reset()">{{l('reset')}}</button>
    </div>
  </div>

</form>
<nz-table nzBordered nzNoResult=" ">
  <thead>
    <tr>
      <th>{{statistics.siteName}}</th>
      <th>{{l('distribute_total_count')}}:{{statistics.totalCount}}</th>
      <th>{{l('kucun_total_count')}}:{{statistics.backed}}</th>
    </tr>
  </thead>
</nz-table>
<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false" [nzData]="tableHelper.items"
  [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
  [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzWidth="100px" nzLeft="0px">{{l('serial_number')}}</th>
      <th>{{l('pda_no')}}</th>
      <th>{{l('operation')}}</th>
      <th nzWidth="140px" nzRight="0px">{{l('in_out_record')}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td>{{data.pdaNo}}</td>
      <td>
        <a (click)="showModal(data.id)" *ngIf="data.state==1">{{l('receive')}}</a>
        <a (click)="showReceiveModal(data.id)" *ngIf="data.state==2">{{l('back')}}</a>
      </td>
      <td nzRight="0px">
        <a (click)="showListModal(data.id)">{{l('view_in_out_record')}}</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="l('receive_registration')" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="receiverId">{{l('receiver')}}</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-select formControlName="receiverId" [(ngModel)]="model.receiverId" [nzPlaceHolder]="l('please_select_receiver')">
          <nz-option *ngFor="let option of userList" [nzValue]="option.id" [nzLabel]="option.account"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="receiveDate">{{l('receive_time')}}</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-date-picker [(ngModel)]="model.receiveDate" formControlName="receiveDate" id="receiveDate"></nz-date-picker>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

<nz-modal [(nzVisible)]="isVisibleBack" [nzTitle]="l('return_registration')" (nzOnCancel)="handleCancelBack()" (nzOnOk)="handleOkBack()"
  [nzOkLoading]="isOkLoadingBack">
  <form nz-form [formGroup]="validateFormBack">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="backDate">{{l('return_date')}}</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-date-picker [(ngModel)]="model.backDate" formControlName="backDate" id="backDate"></nz-date-picker>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

<nz-modal nzWidth="1000" [(nzVisible)]="isVisibleList" [nzTitle]="l('receive_record')" (nzOnCancel)="handleCancelList()" (nzOnOk)='handleCancelList()'>
  <form nz-form class="ant-advanced-search-form">
    <div nz-row [nzGutter]="24">
      <div nz-col nzLg="8" nzXl="8">
        <nz-form-item nzFlex>
          <nz-form-label>{{l('receiver')}}</nz-form-label>
          <nz-form-control>
            <input type="text" [(ngModel)]="name" [ngModelOptions]="{standalone: true}" nz-input [placeholder]="l('please_enter_username')">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzLg="10" nzXl="10">
        <nz-form-item nzFlex>
          <nz-form-label>{{l('end_time')}}</nz-form-label>
          <nz-form-control>
            <nz-range-picker [(ngModel)]="dateRange" [ngModelOptions]="{standalone: true}" (ngModelChange)="onChange($event)"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzLg="6" nzXl="6" class="control-area">
        <button nz-button [nzType]="'primary'" (click)="loadList(deviceId)">{{l('search')}}</button>
        <button nz-button (click)="resetList(deviceId)">{{l('reset')}}</button>
      </div>
    </div>

  </form>

  <nz-table #ajaxTableList nzShowSizeChanger nzBordered [nzFrontPagination]="false" [nzData]="table2Helper.items"
    [nzLoading]="table2Helper.loading" [nzTotal]="table2Helper.totalCount" [(nzPageIndex)]="table2Helper.pageIndex"
    [(nzPageSize)]="table2Helper.pageSize" (nzPageIndexChange)="loadList(deviceId)" (nzPageSizeChange)="loadList(deviceId)"
    [nzShowTotal]="totalTemplate2">
    <thead>
      <tr>
        <th>{{l('serial_number')}}</th>
        <th>{{l('receiver')}}</th>
        <th>{{l('receive_time')}}</th>
        <th>{{l('return_date')}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTableList.data;let i = index">
        <td>{{i++1}}</td>
        <td>{{data.receiverName}}</td>
        <td>{{data.receiveDate | momentFormat:'YYYY-MM-DD'}}</td>
        <td>{{data.backDate | momentFormat:'YYYY-MM-DD'}}</td>
      </tr>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate2 let-total>
    {{l('total')}} {{total}} {{l('items')}}
  </ng-template>

</nz-modal>